Warn Alert Users Before Page Tab Close

#reactjs #javascript #webdev

Get started

trigger the popup warning when user tries to close the page

import { useState, useEffect } from 'react';

export function AreYousureConfirmation(){

  const [isUnsavedWork, setIsUnsavedWork] = useState(false)
  

  useEffect(() => {
    if(!isUnsavedWork) return

    function handleOnBeforeUnload(event:BeforeUnloadEvent){
      event.preventDefault()
      return (event.returnValue = '')  
    }

    window.addEventListener('beforeunload', handleOnBeforeUnload, { capture: true} )
    
    return () => window.removeEventListener('beforeunload', handleOnBeforeUnload, { capture: true} )
  }, [isUnsavedWork])
  

  return (
    <>
      
    </>
  )
}

Make It Smarter

Make the popup aware of the form data so warnings only trigger when there is leftover data in the form.

import { useState, useEffect, FormEvent } from 'react';

export function AreYousureConfirmation(){

  const [isUnsavedWork, setIsUnsavedWork] = useState(false)
  
  function handleOnChange(event: FormEvent){
    const data = new FormData(event.currentTarget as HTMLFormElement)
    const values = Array.from(data.values())
    const changedFields = values.filter(value => value.length || (value as File).size)
    setIsUnsavedWork(Boolean(changedFields.length))
  }

  useEffect(() => {
    if(!isUnsavedWork) return

    function handleOnBeforeUnload(event:BeforeUnloadEvent){
      event.preventDefault()
      return (event.returnValue = '')  
    }

    window.addEventListener('beforeunload', handleOnBeforeUnload, { capture: true} )
    
    return () => window.removeEventListener('beforeunload', handleOnBeforeUnload, { capture: true} )
  }, [isUnsavedWork])
  

  return (
    <>
      <form 
        action="" 
        onChange={handleOnChange}
      ></form>
    </>
  )
}

Credits